<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap{width:100%; height:100%; overflow:hidden; margin:0; font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UzpZ9A94pysSfj013URfjCfeUKjMv52F"></script>
    <title>走航轨迹测试</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var startLong = 113.319559; // 开始时的经度
    var startLat = 23.060046; // 开始时的纬度
    var endLong = 113.319559;
    var endLat = 23.060046;

    var latData = new Array(23.060046, 23.060541, 23.060678, 23.060674, 23.060686, 23.060715, 23.060707, 23.060744, 23.060757, 23.060707, 23.060711, 23.060715, 23.060732, 23.060641, 23.060549, 23.060587, 23.060582, 23.060587, 23.060557, 23.060528, 23.060728);
    var longData = new Array(113.319559, 113.319703, 113.319761, 113.320022, 113.320368, 113.320597, 113.320956, 113.321531, 113.322052, 113.322447, 113.322887, 113.323197, 113.323606, 113.323857, 113.324122, 113.324419, 113.324711, 113.324980, 113.325268, 113.325501, 113.325668);
    var iter = 0;

    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(113.319559,23.060046), 18);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("广州");          // 设置地图显示的城市
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    setInterval(goWay,800); // 0.8秒画一次线

    var carMk;
    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});//马里奥

    function goWay(){
        iter = iter + 1;
        if (iter < latData.length){
            startLat = endLat;
            startLong = endLong;
            endLong = longData[iter]; // 读取经纬度
            endLat  = latData[iter];
            drawIcon(startLong,startLat,endLong,endLat);
        }else{
            pass;
        }
    }

    function drawGreenLine(startLong,startLat,endLong,endLat){
        var polyline = new BMap.Polyline([
            new BMap.Point(startLong,startLat),//起始点的经纬度
            new BMap.Point(endLong,endLat)//终止点的经纬度
        ], {strokeColor:"forestgreen",//设置颜色
            strokeWeight:5, //宽度
            strokeOpacity:1});//透明度
        map.addOverlay(polyline); //将标注添加到地图中
    }

    function drawIcon(startLong,startLat,endLong,endLat){
        if(carMk){
            map.removeOverlay(carMk);
        }
        carMk = new BMap.Marker(
            new BMap.Point(endLong,endLat),
            {icon:myIcon});
        map.addOverlay(carMk);
        drawGreenLine(startLong,startLat,endLong,endLat);
    }
</script>
